import React from 'react';
import {Icon, Card} from 'antd';
import VueLogo from '@/assets/img/community/logo-vue.svg';
import ReactLogo from '@/assets/img/community/logo-react.svg';
import WebpackLogo from '@/assets/img/community/logo-webpack.svg';
import NodeLogo from '@/assets/img/community/logo-node.svg';

const data = [
    {
        title: 'Vue',
        icon: VueLogo,
        message: '渐进式 JavaScript 框架',
        github: 'https://github.com/vuejs/vue'
    },
    {
        title: 'React',
        icon: ReactLogo,
        message: '创建大型的 JavaScript 应用程序',
        github: 'https://github.com/facebook/react'
    },
    {
        title: 'Node',
        icon: NodeLogo,
        message: '基于 V8 引擎的 JS 运行环境',
        github: 'https://github.com/nodejs/node'
    },
    {
        title: 'Webpack',
        icon: WebpackLogo,
        message: '用于现代 JavaScript 应用程序的静态模块打包工具',
        github: 'https://github.com/webpack/webpack'
    }
];

const setStyle = index => {
    return {
        marginLeft: index === 0 ? '0px' : '8px',
        marginRight: index === data.length - 1 ? '0px' : '8px'
    };
};
export default props => {
    return (
        <ul className="flex" style={{flexWrap: 'wrap'}}>
            {data.map((item, index) => (
                <li
                    className="flex-1 flex-col just-center align-center bg-fff ui-ml-8 ui-mr-8"
                    style={setStyle(index)}
                    key={index + 1}
                    onClick={() => window.open(item.github)}
                >
                    <Card hoverable bordered={false} className="ui-w-100 ui-h-100">
                        <h3 className="flex align-center">
                            <span className="flex-1 f18 color-666">{item.title}</span>
                            <Icon type="github" />
                        </h3>
                        <div className="ui-m-10 flex-col just-center align-center">
                            <img width="45" src={item.icon} alt="logo" />
                        </div>

                        <div className="f12 color-999 flex align-end" style={{height: '25px'}}>
                            {item.message}
                        </div>
                    </Card>
                </li>
            ))}
        </ul>
    );
};
